<template>
	<div>
		<md-toolbar class="md-dense" md-elevation="0">
			<span class="md-body-1">{{seriesName}}{{getLangText(label.chartTitle)}}</span>
			<span class="md-toolbar-section-end">
				<!-- <md-button class="md-icon-button" @click="sendStyle" v-show="isShow">
					<i class="iconfont iconsave"></i>
				</md-button>-->
				<md-button class="md-icon-button" @click="sendStyle">
					<i :class="['iconfont',isShow?'iconsave':'iconright']"></i>
				</md-button>
			</span>
		</md-toolbar>
		<div v-if="isShow">
			<div style="padding:0 8px;">
				<md-field>
					<label>{{getLangText(label.name)}}</label>
					<md-input v-model="gaugeSeries.name"></md-input>
				</md-field>

				<md-field>
					<label>{{getLangText(label.startAngle)}}</label>
					<md-input v-model="gaugeSeries.startAngle"></md-input>
				</md-field>

				<md-field>
					<label>{{getLangText(label.endAngle)}}</label>
					<md-input v-model="gaugeSeries.endAngle"></md-input>
				</md-field>

				<md-field>
					<label>{{getLangText(label.min)}}</label>
					<md-input v-model="gaugeSeries.min"></md-input>
				</md-field>

				<md-field>
					<label>{{getLangText(label.max)}}</label>
					<md-input v-model="gaugeSeries.max"></md-input>
				</md-field>

				<md-field>
					<label>{{getLangText(label.splitNumber)}}</label>
					<md-input v-model="gaugeSeries.splitNumber"></md-input>
				</md-field>

				<md-field>
					<label>{{getLangText(label.radius)}}</label>
					<md-input v-model="gaugeSeries.radius"></md-input>
				</md-field>

				<div class="table-row-item">
					<span>{{getLangText(label.clockwise)}}:</span>
					<span>
						{{getLangText(label.no)}}
						<md-switch v-model="gaugeSeries.clockwise"></md-switch>
						{{getLangText(label.yes)}}
					</span>
				</div>

				<div class="table-row-item">
					<span>{{getLangText(label.pointer)+getLangText(label.show)}}:</span>
					<span>
						{{getLangText(label.hide)}}
						<md-switch v-model="gaugeSeries.pointer.show"></md-switch>
						{{getLangText(label.show)}}
					</span>
				</div>

				<md-field>
					<label>{{getLangText(label.pointer)+getLangText(label.length)}}</label>
					<md-input v-model="gaugeSeries.pointer.length"></md-input>
				</md-field>

				<md-field>
					<label>{{getLangText(label.pointer)+getLangText(label.width)}}</label>
					<md-input v-model="gaugeSeries.pointer.width"></md-input>
				</md-field>



				<div class="table-row-item">
					<span>{{getLangText(label.axisLine)+getLangText(label.show)}}:</span>
					<span>
						{{getLangText(label.hide)}}
						<md-switch v-model="gaugeSeries.axisLine.show"></md-switch>
						{{getLangText(label.show)}}
					</span>
				</div>
			</div>
			<line-style
				:lang-type="langType"
				:line-name="getLangText(label.axisLine)"
				:option="gaugeSeries.axisLine.lineStyle"
				@line-style-result="onAxisLine"
                :line-type="2"
			></line-style>
			<div style="padding:0 8px;">
				<div class="table-row-item">
					<span>{{getLangText(label.splitLine)+getLangText(label.show)}}:</span>
					<span>
						{{getLangText(label.hide)}}
						<md-switch v-model="gaugeSeries.splitLine.show"></md-switch>
						{{getLangText(label.show)}}
					</span>
				</div>

				<md-field>
					<label>{{getLangText(label.splitLine)+getLangText(label.length)}}</label>
					<md-input v-model="gaugeSeries.splitLine.length"></md-input>
				</md-field>
			</div>
			<line-style
				:lang-type="langType"
				:line-name="getLangText(label.splitLine)"
				:option="gaugeSeries.splitLine.lineStyle"
				@line-style-result="onSplitLine"
			></line-style>

			<div style="padding:0 8px;">
				<div class="table-row-item">
					<span>{{getLangText(label.axisTick)+getLangText(label.show)}}:</span>
					<span>
						{{getLangText(label.hide)}}
						<md-switch v-model="gaugeSeries.axisTick.show"></md-switch>
						{{getLangText(label.show)}}
					</span>
				</div>

				<md-field>
					<label>{{getLangText(label.axisTick)+getLangText(label.length)}}</label>
					<md-input v-model="gaugeSeries.axisTick.length"></md-input>
				</md-field>
				<md-field>
					<label>{{getLangText(label.axisTick)+getLangText(label.splitNumber)}}</label>
					<md-input v-model="gaugeSeries.axisTick.splitNumber"></md-input>
				</md-field>
			</div>
			<line-style
				:lang-type="langType"
				:line-name="getLangText(label.axisTick)"
				:option="gaugeSeries.axisTick.lineStyle"
				@line-style-result="onAxisTick"
			></line-style>

			<label-style
				:lang-type="langType"
				:label-name="getLangText(label.axisLabel)"
				:option="gaugeSeries.axisLabel"
				@label-style-result="onLabelStyle"
			></label-style>
            <div style="display:flex;padding:0 8px;">
                <md-field style="width:135px;">
					<label>{{getLangText(label.title)+getLangText(label.offsetCenter)}}X</label>
					<md-input v-model="gaugeSeries.title.offsetCenter[0]"></md-input>
				</md-field>

				<md-field style="width:135px;margin-left:8px;">
					<label>{{getLangText(label.title)+getLangText(label.offsetCenter)}}Y</label>
					<md-input v-model="gaugeSeries.title.offsetCenter[1]"></md-input>
				</md-field>
            </div>

			<label-style
				:lang-type="langType"
				:label-name="getLangText(label.title)"
				:option="gaugeSeries.title"
				@label-style-result="onTitleStyle"
			></label-style>

            <div style="display:flex;padding:0 8px;">
                <md-field style="width:135px;">
					<label>{{getLangText(label.detail)+getLangText(label.offsetCenter)}}X</label>
					<md-input v-model="gaugeSeries.detail.offsetCenter[0]"></md-input>
				</md-field>

				<md-field style="width:135px;margin-left:8px;">
					<label>{{getLangText(label.detail)+getLangText(label.offsetCenter)}}Y</label>
					<md-input v-model="gaugeSeries.detail.offsetCenter[1]"></md-input>
				</md-field>
            </div>

			<label-style
				:lang-type="langType"
				:label-name="getLangText(label.detail)"
				:option="gaugeSeries.detail"
				@label-style-result="onDetailStyle"
			></label-style>

			<item-style
				:lang-type="langType"
				:option="gaugeSeries.itemStyle"
				@item-style-result="onItemStyle"
			></item-style>
			<item-style
				:lang-type="langType"
				:item-name="getLangText(label.emphasis)"
				:option="gaugeSeries.emphasis.itemStyle"
				@item-style-result="onItemStyleEmphasis"
			></item-style>
		</div>
	</div>
</template>
<script>
	import LabelStyle from "@/components/comp/LabelStyle";
	import ItemStyle from "@/components/comp/ItemStyle";
	import LineStyle from "@/components/comp/LineStyle";

	import ColorPicker from "@/components/comp/ColorPicker";
	export default {
		name: "GaugeSeries",
		props: {
			langType: {
				type: String,
				default: window.localStorage.getItem("langType")
			},
			option: {
				type: Object,
				default: function() {
					return {};
				}
			},
			seriesName: {
				type: String,
				default: ""
			}
		},
		components: {
			"label-style": LabelStyle,
			"item-style": ItemStyle,
			"line-style": LineStyle,
			"color-picker": ColorPicker
		},
		data: () => ({
			label: {
				chartTitle: { zh: "仪表盘", en: "gaugeChart" },
				show: { zh: "显示", en: "show" },
				hide: { zh: "隐藏", en: "hide" },
				yes: { zh: "是", en: "yes" },
				no: { zh: "否", en: "no" },

				label: { zh: "标签", en: "label " },

				formatter: { zh: "模板", en: "formatter" },
                emphasis: { zh: "强调", en: "emphasis" },
                name:{zh:"名称",en:"name"},

				length: { zh: "长度", en: "length" },
				clockwise: { zh: "顺时针排布", en: "clockwise" },
				startAngle: { zh: "起始角度", en: "startAngle" },
				endAngle: { zh: "结束角度", en: "endAngle" },
				splitNumber: { zh: "分割数", en: "splitNumber" },
				pointer: { zh: "指针", en: "pointer" },
                width: { zh: "宽度", en: "wdith" },
                min:{zh:"最小值",en:"min"},
                max:{zh:"最大值",en:"max"},
				offsetCenter: { zh: "偏移中心", en: "offsetCenter" },
				radius: { zh: "半径", en: "radius" },
				color: { zh: "图形颜色", en: "color" },
				detail: { zh: "详情", en: "detail" },
				title: { zh: "标题", en: "title" },
				axisLabel: { zh: "刻度标签", en: "axisLabel" },
				axisLine: { zh: "轴线", en: "axisLine" },
				axisTick: { zh: "轴刻度", en: "axisTick" },
				splitLine: { zh: "分割线", en: "splitLine" }
			},
			isShow: false,
			gaugeSeries: {
				type: "gauge",
				name: "",
				startAngle: 225,
				endAngle: -45,
				clockwise: true,
				min: 0,
				max: 100,
				splitNumber: 10,
				radius: "75%",
				label: {},
				axisLabel: {},
				axisLine: {
					show: true,
					lineStyle: {}
				},
				splitLine: {
					show: true,
					length: 30,
					lineStyle: {}
				},
				axisTick: {
					show: true,
					length: 8,
					splitNumber: 5,
					lineStyle: {}
				},

				pointer: {
					show: true,
					length: "80%",
					width: 8
				},
				itemStyle: {},

				emphasis: {
					label: {},
					itemStyle: {}
				},
				title: {
					offsetCenter: [0, "-40%"]
				},
				detail: {
					offsetCenter: [0, "40%"]
				}
			},

			labelPosition: [
				{ zh: "上侧", en: "top" },
				{ zh: "左侧", en: "left" },
				{ zh: "右侧", en: "right" },
				{ zh: "下侧", en: "bottom" },
				{ zh: "内部", en: "inside" },
				{ zh: "内左", en: "insideLeft" },
				{ zh: "内右", en: "insideRight" },
				{ zh: "内上", en: "insideTop" },
				{ zh: "内下", en: "insideBottom" },
				{ zh: "内上左", en: "insideTopLeft" },
				{ zh: "内下左", en: "insideBottomLeft" },
				{ zh: "内上右", en: "insideTopRight" },
				{ zh: "内下右", en: "insideBottomRight" }
			],

			picker: {
				show: false,
				current: "",
				idx: 0,
				result: ""
			},
			originOption:'',
			isParse:false
		}),

		watch: {
			isShow() {
				if (this.isShow) {
					this.parseObj();
				} else {
					this.picker.show = false;
				}
			},
			gaugeSeries:{
            deep:true,
            handler(){
			   if(this.isShow&&!this.isParse)
			   this.$emit("series-result", JSON.parse(JSON.stringify(this.gaugeSeries)));
            }
        }
		},
		methods: {
			showColorPicker(item, idx) {
				if (this.picker.idx != idx || !this.picker.show) {
					this.picker.current = "color";
					this.picker.result = item;
					this.picker.idx = idx;
					this.picker.show = true;
				} else {
					this.picker.show = false;
				}
			},
			onColorPicker(op) {
				this.gaugeSeries.color[this.picker.idx] = op.rgba;
			},
			addColorPicker() {
				this.gaugeSeries.color.push("#FFF");
			},
			delColorPicker(idx) {
				this.gaugeSeries.color.splice(idx, 1);
			},

			onAxisLine(result) {
				this.gaugeSeries.axisLine.lineStyle = result;
			},
			onSplitLine(result) {
				this.gaugeSeries.splitLine.lineStyle = result;
			},
			onAxisTick(result) {
				this.gaugeSeries.axisTick.lineStyle = result;
			},

			onLabelStyle(result) {
				this.gaugeSeries.axisLabel = result;
			},
			onTitleStyle(result) {
				this.gaugeSeries.title = result;
			},
			onDetailStyle(result) {
				this.gaugeSeries.detail = result;
			},
			onItemStyle(result) {
				this.gaugeSeries.itemStyle = result;
			},

			onItemStyleEmphasis(result) {
				this.gaugeSeries.emphasis.itemStyle = result;
			},

			sendStyle() {
				this.isShow = this.isShow ? false : true;
				if (!this.isShow) {
					this.$emit("series-result", JSON.parse(JSON.stringify(this.gaugeSeries)));
				}
			},
			parseObj() {
				if(!this.option||JSON.stringify(this.option)=='{}')return;
				this.isParse=true;
				for (var key in this.option) {
					this.gaugeSeries[key] = this.option[key];
				}
				this.originOption=JSON.stringify(this.gaugeSeries);
				var that=this;
				setTimeout(() => {
					that.isParse=false;
				}, 100);
			},
		colseOption() {
				this.isShow = false;
				if (this.originOption!=JSON.stringify(this.gaugeSeries)) {					
					this.$emit("series-result", this.gaugeSeries);
				}
			},
			listenEvent() {
				this.app.$on("close-option", this.colseOption);
			},
			offEvent() {
				this.app.$off("close-option", this.colseOption);
			}
		},
		mounted() {
			this.listenEvent();
		},
		beforeDestroy(){
			this.offEvent();
		}
	};
</script>
